<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table {
            width: 400px;
           
            border: 2px solid #9C9EA1;
            border-collapse: collapse;
            margin-top: 10px;
        }
    
        th,td{
            border: 1px solid #9C9EA1;
            text-align: center;
        }
        button{
            margin-left: 5px;
            margin-right: 5px;
        }
        input{
            width: 40px;
        }

    </style>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="root">

        <button v-show="list.length>0">添加</button>
        
        <table border="1">
            <tr v-show="list.length>0">
                <th>id</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="i in list" :key="i.id">
                <td>{{i.id}}</td>
                <td>{{i.name}}</td>
                <td>{{i.price}}</td>
                <td><button @click="reduce(i.id)" :disabled="i.num<2 ? true:false">-</button>{{i.num}}<button @click="add(i.id)">+</button></td>
                <td><button @click="del(i.id)">移除</button></td>
            </tr>
            <tr v-show="list.length>0">
                <th><input type="number" v-model.number="newid"></th>
                <th><input type="text" v-model="newname"></th>
                <th><input type="number" v-model.number="newprice"></th>
                <th><input type="number" v-model.number="newnum"></th>
                <th><button @click="addall()">确定</button></th>
            </tr>
        </table>

        <h1 v-show="list.length>0">总价格:￥{{allprice}}元</h1>

        <h1 v-show="list.length==0">购物车为空</h1>

    </div>
    
</body>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    vm = new Vue({
        el: '#root',
        data:{
            list:[
                {id:1,name:'充电宝',price:99.111,num:1},
                {id:2,name:'小风扇',price:88.222,num:1},
                {id:3,name:'小音箱',price:125.533,num:1},
                {id:4,name:'蓝牙耳机',price:315.344,num:1},
            ],
            newid:0,
            newname:'',
            newprice:0,
            newnum:1,
        },
        methods: {
            add(id){
                for(let i=0;i<this.list.length;i++){
                    if(this.list[i].id==id){
                        this.list[i].num++;
                    }
                }
            },
            reduce(id){
                for(let i=0;i<this.list.length;i++){
                    if(this.list[i].id==id){
                        this.list[i].num--;
                    }
                }
            },
            del(id){
                this.list.pop(id);
            },
            addall(){
                for(let i=0;i<this.list.length;i++){
                    if(this.list[i].id==this.newid){
                        alert("id重复");
                        return 0;
                    }
                }
                this.list.push({id:this.newid,name:this.newname,price:this.newprice,num:this.newnum})
                this.newid = 0;
                this.newname = '';
                this.newprice = 0;
                this.newnum = 1;
            }
        },
        computed:{
            allprice(){
                let all=0;
                for(let i=0;i<this.list.length;i++){
                    all += this.list[i].num * this.list[i].price;
                }
                return all;
            }
        }
    })

</script>

</html>